import { Component } from 'react';
import { View, Image, Text } from '@tarojs/components'
import './index.scss'
import Iconfont from '@/components/Iconfont'

interface Props {
  list: any
  imgUrl?: boolean
  showRight: any //是否显示箭头或者价格和数量，默认显示价格和数量
  isNk: boolean
  unit: string
}

interface State { }

export default class Index extends Component<Props> {

  constructor (props) {
    super(props)
    this.state = {}
  }

  state: State

  UNSAFE_componentWillMount() { }
  componentDidMount() { }
  UNSAFE_componentWillReceiveProps(nextProps, nextContext) { }
  componentWillUnmount() { }
  componentDidShow() { }
  componentDidHide() { }
  componentDidCatchError() { }
  componentDidNotFound() { }
  render() {
    const { list, imgUrl, showRight, isNk = false, unit } = this.props
    let subName = ''
    if (list) {
      // console.log(list)
      subName = list.itemSubName || list.goodsSkuName
      if (list.tags && list.tags.length) {
        subName = list.tags.join(',')
      }
    }
    console.log('list---展示', list)
    return (
      <View className='good-list'>
        {
          !imgUrl && <Image className='pic' src={list.itemLogo || list.goodsThumbnail || list.thumbnailUrl} />
        }
        <View className='good-cont'>
          <View className='name'>{list.itemName || list.goodsName}</View>
          <View className='sku'>
            {
              subName && <View className='sku-text'>{subName}</View>
            }
          </View>
          {list.goods && list.goods.laborFee > 0 && <View className='text'>另需工时费：￥{list.goods.laborFee}</View>}
        </View>
        {
          !showRight ? (<View className='number-info'>
            <View className='price'>{list.itemPrice || list.salePrice || list.platformPrice || list.annualCardPrice}<Text className='unit'>{unit}</Text></View>
            {
              isNk ? list.annualCardItem.showType === 0 ? <View className='nk-box'>
                <View className='nk-item'><Text className='c2'>x{list.number}</Text></View>
              </View> :
                <View className='nk-box'>
                  <View className='nk-item'><Text className='c1'>{list.annualCardItem.label.split('/')[0]}</Text><Text className='c2'>/{list.annualCardItem.label.split('/')[1]}</Text></View>
                  <View className='nk-item'><Text className='c1'>{list.annualCardItem.remainNum}</Text><Text className='c2'>/{list.annualCardItem.useNum}</Text></View>
                </View> : <View className='number'>{list.itemNumber || list.number || (list.buyNum * list.eachUse)}</View>
            }


          </View>) : ''
        }
      </View>
    )
  }
}
